<template>
  <div class="divBox">
    <el-card class="box-card mb20">
      <div class="divBox1" :style="{width:`${divWidth}px`,height:`${divHeight}px`,backgroundImage:`url(${img})`}">
        <vdr
          :w="item.width"
          :h="item.height"
          :x="item.x"
          :y="item.y"
          class="vv"
          @dragging="(x, y) => dragging(item, x, y)"
          @resizing="(x, y, width, height) => onResize(item,x,y,width,height)"
          :parent="true"
          v-for="(item,index) in list"
          :key="index">
          <div @dblclick.stop="cc(item)">{{ item.name }}</div>
        </vdr>
      </div>
    </el-card>
    <el-card class="fixed-card">
<!--      <div v-for="(item,index) in list" :key="index">
        x:{{ item.x }}/y:{{ item.y }}/width:{{ item.width }}/height:{{ item.height }}/name:{{ item.name }}
      </div>-->
      <el-button size="small" type="primary" @click="add">新增</el-button>
      <el-button size="small" type="primary" @click="submit">保存</el-button>
    </el-card>
    <!--    获取尺寸 getDetail1   getImageSize  -->
    <img :src="img" v-show="false" @load="getImageSize"/>

  </div>
</template>

<script>

import {floorplanpicUpdateApi} from '@/api/marketing';

import {picDetail} from "@/api/floor";
import {roterPre} from '@/settings';

export default {

  name: 'addinfopic',
  data() {
    return {
      roterPre: roterPre,
      img: null,
      divWidth: null,
      divHeight: null,
      list: [],
      mid: null,
    };
  },

  computed: {},
  mounted() {
    if (this.$route.params.id) {
      this.mid = this.$route.params.id
      this.getDetail(this.mid);
    }

  },
  created() {

  },
  methods: {
    getDetail(id) {
      picDetail(id).then(res => {
        this.img = res.data.info.image_input;
        setTimeout(() => {
          this.list = res.data.info.ichnography_json;
        }, 50)
      })
    },
    submit() {
      const data = {
        mid: this.mid,
        list: this.list
      }
      floorplanpicUpdateApi(data)
        .then((res) => {
          this.$message.success(res.message);
          this.$router.push({path: this.roterPre + '/marketing/floorplan/list'});
        })
        .catch((res) => {
          this.$message.error(res.message);
        });

      console.log(data)
    },
    cc(item) {
      console.log('双击触发', item)
      this.$prompt('请输入门牌号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        item.name = value;
        this.$message({
          type: 'success',
          message: '你的门牌号为: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    getImageSize(event) {
      const image = event.target;
      this.divWidth = image.width;
      this.divHeight = image.height;
    },
    add() {
      const obj = {
        width: 50,
        height: 20,
        x: 0,
        y: 0,
        name: `店铺`
      }
      this.list.push(obj)
    },
    onResize(item, x, y, width, height) {
      console.log('缩放', item, x, y, width, height)
      item.x = x;
      item.y = y;
      item.width = width;
      item.height = height;
    },
    dragging(item, x, y) {
      console.log('移动', item, x, y)
      item.x = x
      item.y = y
    }
  },
};
</script>

<style lang="scss" scoped>

.fixed-card {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  box-shadow: 0 -1px 2px rgb(240, 240, 240);
  text-align: center;
}

.divBox1 {
  position: relative;
}

.vv {
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
</style>
